<template>
  <div class="group bg-white">
    <div class="group-container">
      <div class="shoveler">
        <div class="group-main-title" :class="{ '!border-0': !more }">
          <h2>{{ title }}</h2>
          <span class="ml-auto" v-show="more">
            <a href="#" v-show="moreLink" @click="onNav(moreLink)" class="text-16px"
              >点击查看更多</a
            >
          </span>
        </div>
        <swiper :modules="[Navigation, FreeMode]" slidesPerView="auto" :freeMode="true">
          <swiper-slide class="group-item" v-for="(item, index) in list" :key="index">
            <a href="javascript:;" @click="onNav(`/goods?id=${item.id}`)">
              <div class="group-item-image">
                <el-image :src="item.image" class="w-160px h-160px" :fit="'contain'" />
              </div>
              <template v-if="!onlyImg">
                <div class="group-item-title">
                  <span class="line-clamp-2 text-16px">{{ item.goodsName }}</span>
                </div>
                <div class="mt-10px text-16px text-price_red" v-if="item.price > 0">
                  ${{ padZeroPrice(item.price) }}
                </div>
                <div class="group-item-rate" v-show="rating">
                  <el-rate
                    v-model="item.isEnableSpec"
                    disabled
                    show-score
                    score-template=""
                    class="!h-20px"
                  />
                </div>
                <div class="group-item-btn" v-show="btn">
                  <el-button type="warning">加入购物车</el-button>
                </div>
              </template>
            </a>
          </swiper-slide>
        </swiper>
      </div>
    </div>
  </div>
</template>

<script setup>
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/free-mode'
import { Navigation, FreeMode } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/vue'
import { padZeroPrice } from '@/utils/price'

const props = defineProps({
  title: {
    type: String,
    required: true,
  },
  list: {
    type: Array,
    required: true,
  },
  more: {
    type: Boolean,
    default: true,
  },
  rating: {
    type: Boolean,
    default: true,
  },
  onlyImg: {
    type: Boolean,
    default: false,
  },
  btn: {
    type: Boolean,
    default: false,
  },
  type: {
    type: Number,
    default: 1,
  },
  moreLink: {
    type: String,
    default: null,
  },
})

const onNav = (path) => {
  window.open('https://www.rcep.cn' + path, '_blank')
}
</script>

<style lang="scss" scoped>
.group {
  .group-container {
    .shoveler {
      color: #000;
      padding: 10px 0;
      width: 100vw;
      padding: 10px;
    }

    .group-main-title {
      display: flex;
      align-items: center;
      border-bottom: 1px solid #eee;
      // margin-bottom: 20px;

      h2 {
        font-size: 18px;
        font-weight: bold;
        color: #000;
      }
    }

    .group-item {
      display: inline-block;
      white-space: normal;
      letter-spacing: normal;
      width: 160px;
      margin-right: 10px;

      .group-item-image {
        margin-bottom: 4px;

        img {
          max-width: 160px;
          max-height: 160px;
        }
      }

      .group-item-title {
        // max-height: 80px;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        // overflow: hidden;
        line-height: 20px;
        height: 32px;
      }

      .group-item-cate {
        font-size: 12px;
        color: #565959;
        line-height: 16px;
      }
    }
  }
}
</style>
